<template>
    <div class="app-container">
        <div class="pageTitle">
            <div class="pageTitleSub">
                <el-form ref="queryForm" :model="queryParams" label-width="100px" size="small">
                    <el-row :gutter="1">
                        <el-col :span="6">
                            <el-form-item label="开始时间" prop="create_time1">
                                <el-date-picker
                                    v-model="queryParams.create_time1"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    type="datetime"
                                    placeholder="选择日期时间" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="截止时间" prop="create_time2">
                                <el-date-picker
                                    v-model="queryParams.create_time2"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    type="datetime"
                                    placeholder="选择日期时间" />
                            </el-form-item>
                        </el-col>

                        <el-col :span="6">
                            <el-row>
                                <el-form-item label="操作者" prop="operator_id">
                                    <el-col :span="14">
                                        <el-select v-if="!show" v-model="user" placeholder="请选择" :disabled="show" @change="changeUser">
                                            <el-option
                                                v-for="item in userSelect"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value" />
                                        </el-select>
                                        <span v-if="show">{{ user }}</span>
                                    </el-col>
                                </el-form-item>
                            </el-row>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item>
                                <el-button size="small" type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>

        <page-main>
            <el-table ref="orderTable" v-loading="isLoading" class="actionTable" stripe :data="tableData"
                      header-cell-class-name="table-header" style="width: 100%;" :row-class-name="tableRowClassName" border>
                <el-table-column label="时间" width="200">
                    <template slot-scope="scope">
                        {{ moment(scope.row.create_time).format('YYYY-MM-DD HH:mm:ss') }}
                    </template>
                </el-table-column>
                <el-table-column label="操作者" width="100" prop="name" />
                <el-table-column label="操作功能" width="180" prop="module_name" />
                <el-table-column label="事件类型" prop="operation_type" />
            </el-table>
            <div class="Pagination">
                <el-pagination
                    background
                    layout="total, sizes,prev, pager, next,jumper"
                    :current-page.sync="queryParams.CurrentPage"
                    :page-size="20"
                    :page-sizes="[20]"
                    :total="totalCount"
                    @current-change="handleCurrentChange" />
            </div>
        </page-main>
    </div>
</template>

<script>
import moment from 'moment';
import {InquirytLog} from '@/api/resourceManageApi';
import {OperateSelectUser} from '@/api/userManageApi';

export default {
    name: 'operateLog',
    components: {
    },
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {

            dialogVisible: false,
            queryParams: {
                operator_id: '',
                create_time1: moment().subtract(1, 'hour').format('YYYY-MM-DD HH:mm:ss'),
                create_time2: moment().format('YYYY-MM-DD HH:mm:ss'),
                CurrentPage: 1
            },
            isLoading: false,
            tableData: [],
            totalCount: 0,
            detailData: {},
            user: '',
            userSelect: [],
            userInfo: []
        };
    },
    created() {

    },
    mounted() {
        Promise.all([
            this.loadRemoteData(),
            this.initTenforcerInfo()
        ]).then(res => {
            // console.log(res);
            setTimeout(() => {
                this.hideLoading();// 延时结束loading
            }, 800);
        });
    },
    methods: {
        tableRowClassName({row, rowIndex}) {
            if (this.$refs['vehicle-detail'] && this.$refs['vehicle-detail'].outerVisible && row == this.detailData) {
                return 'selected-row';
            }
            return '';
        },
        moment,
        handleQuery() {
            Promise.all([
                this.loadRemoteData()
            ]).then(res => {
                // console.log(res);
                setTimeout(() => {
                    this.hideLoading();// 延时结束loading
                }, 800);
            });
        },
        handleCurrentChange(val) {
            this.queryParams.CurrentPage = val;
            this.loadRemoteData();
        },
        initTenforcerInfo() {
            OperateSelectUser().then(res => {
                if (res.status == '0') {
                    let result = res.res.OperateSelectUser;
                    this.userInfo = res.res.OperateSelectUser;
                    for (let i = 0; i < result.length; i++) {
                        let op1 = {
                            value: result[i].name,
                            label: result[i].name
                        };
                        this.userSelect.push(op1);
                    }
                }
            }).catch(err => {
                console.log(err);
            });
        },
        changeUser(value) {
            for (let i = 0; i < this.userInfo.length; i++) {
                let obj = this.userInfo[i];
                if (obj.user_name == value) {
                    this.user = obj.user_name;
                    this.queryParams.operator_id = obj.user_id;
                    // console.log(this.queryParams.operator_id);
                    break;
                }
            }
        },
        loadRemoteData() {
            this.isLoading = true;
            if (!this.queryParams.create_time1) {
                this.queryParams.create_time1 = '';
            }
            if (!this.queryParams.create_time2) {
                this.queryParams.create_time2 = '';
            }

            InquirytLog(this.queryParams).then(res => {
                this.isLoading = false;
                this.tableData = res.res.InquiryLog;
                if (this.tableData && this.tableData.length > 0) {
                    this.totalCount = this.tableData[0].totalCount;
                    console.log(this.totalCount);
                } else {
                    this.totalCount = 0;
                }

            }).catch(err => {
                this.isLoading = false;
                console.log(err);
            });
        }

    }
};
</script>

<style scoped>

.el-col {
    min-height: 1px;
}
.table-header {
    background-color: #f8f8f8 !important;
}
/deep/
.el-table td {
    padding: 5px 0 !important;
}
/deep/
.el-button--text {
    padding: 7px 0;
}
</style>
